<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
</head>
<body>
    <!-- 注册表单容器 -->
    <form id="registrationForm">
        <h2>用户注册</h2>
        
        <!-- 用户名输入框 -->
        <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" required>
        </div>
        
        <!-- 密码输入框 -->
        <div>
            <label for="password">密码:</label>
            <input type="password" id="password" required>
        </div>
        
        <!-- 确认密码输入框 -->
        <div>
            <label for="confirmPassword">确认密码:</label>
            <input type="password" id="confirmPassword" required>
        </div>
        
        <!-- 注册按钮 -->
        <button type="submit">注册</button>
    </form>

    <script>
        // 获取表单元素
        const form = document.getElementById('registrationForm');
        
        // 监听表单提交事件
        form.addEventListener('submit', (event) => {
            // 阻止表单默认提交行为
            event.preventDefault();
            
            // 获取输入值
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            
            // 简单验证：检查密码是否一致
            if (password !== confirmPassword) {
                alert('两次输入的密码不一致');
                return;
            }
            
            // 准备JSON数据
            const userData = {
                "register": [
                        {
                            "key": 301,
                            "name": "username",
                            "type": 4,
                            "value": username
                        },
                        {
                            "key": 302,
                            "name": "password",
                            "type": 4,
                            "value": password
                        },
                        {
                            "key": 303,
                            "name": "authority",
                            "type": 3,
                            "value": 0
                        }
                    ]
            };
            
            // 创建XMLHttpRequest对象
            const xhr = new XMLHttpRequest();
            var url = "";  
            // 配置请求
            xhr.open('POST', url, true);
            
            // 设置请求头，指定请求体格式为JSON
            xhr.setRequestHeader('Content-Type', 'application/json');
            
            // 设置响应类型为JSON
            xhr.responseType = 'json';
            
            // 监听请求状态变化
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) { // 请求已完成
                    if (xhr.status === 200) { // 成功状态码
                        // 注册成功，跳转到登录页面
                        alert('注册成功，请登录');
                        window.location.href = 'login2.html';
                    } else {
                        // 注册失败，显示错误信息
                        const errorData = xhr.response;
                        alert(`注册失败: ${errorData.message}`);
                    }
                }
            };
            
            // 处理网络错误
            xhr.onerror = function() {
                alert('网络错误，请稍后再试');
                console.error('注册请求出错');
            };
            
            // 使用send()方法发送JSON数据
            xhr.send(JSON.stringify(userData));
        });
    </script>
</body>
</html>